<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="areaform"
      ref="taskform"
      class="demo-form-inline"
    >
      <el-form-item label="点位搜索">
        <el-input
          v-model="areaform.nodesearch"
          clearable
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="区域搜索">
        <el-select v-model="areaform.areasearch" clearable placeholder="请选择">
          <el-option
            v-for="item in getAreaOptionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button
          @click="newAndChange('新建')"
          size="mini"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff8437; color: #fff"
          >新建</el-button
        >
      </div>
      <el-table :data="nodelists">
        <!-- 放置列 -->
        <el-table-column
          prop="index"
          align="center"
          width="50px"
          label="序号"
        />
        <el-table-column prop="name" align="center" label="点位名称" />
        <el-table-column prop="region.name" align="center" label="所在区域" />
        <el-table-column
          prop="businessType.name"
          align="center"
          label="商圈类型"
        />
        <el-table-column prop="ownerName" align="center" label="合作商" />
        <el-table-column prop="name" align="center" label="详细地址" />
        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="details(row)"
              >查看详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="newAndChange('修改', row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row
        type="flex"
        style="height: 60px"
        align="middle"
        justify="space-between"
      >
        <el-col :span="12"
          ><span style="font-size: 13px; color: #999; padding-left: 12px"
            >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
              totalpage
            }}页</span
          ></el-col
        >
        <el-col :push="12">
          <el-button-group>
            <el-button
              type="primary"
              @click="innPage"
              size="mini"
              :disabled="pageParams.pageIndex == 1"
              icon="el-icon-arrow-left"
              style="
                background-color: #d5ddf8;
                color: #000;
                margin-right: 12px;
                border: none;
              "
              >上一页</el-button
            >
            <el-button
              type="primary"
              @click="addPage"
              size="mini"
              :disabled="pageParams.pageIndex == this.totalpage"
              style="background-color: #d5ddf8; color: #000; border: none"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <!-- 新增区域的dialog -->
    <el-dialog
      title="新增区域"
      :visible.sync="dialogFormVisible"
      @close="closefn"
    >
      <el-form
        :model="addNodeForm"
        :rules="rules"
        label-position="right"
        label-width="100px"
        ref="addnodeform"
      >
        <el-form-item label="点位名称" width="200px" prop="name">
          <el-input
            v-model="addNodeForm.name"
            maxlength="15"
            show-word-limit
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="所在区域" prop="regionId">
          <el-select
            v-model="addNodeForm.regionId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in getAreaOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈" prop="businessId">
          <el-select
            v-model="addNodeForm.businessId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in businessTypeOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商" prop="ownerId">
          <el-select
            v-model="addNodeForm.ownerId"
            clearable
            placeholder="请选择"
            @change="getownername"
          >
            <el-option
              v-for="item in partnerOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-cascader
            :options="addressData"
            :disabled="false"
            @change="handleAddress"
            style="width: 95%"
            v-model="addressSelections"
            placeholder="请选择省市区"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="addr">
          <el-input
            v-model="addNodeForm.addr"
            type="textarea"
            maxlength="40"
            show-word-limit
            placeholder="请填写详细地址"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quitfn">取 消</el-button>
        <el-button type="primary" @click="submitfn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 区域详情的dialog -->
    <el-dialog
      title="区域详情"
      :visible.sync="showAreadetails"
      @close="closefn1"
    >
      <div>
        <div>
          <span>
            <el-table :data="machienList">
              <el-table-column
                prop="index"
                align="center"
                label="序号"
                width="50px"
              ></el-table-column>
              <el-table-column
                prop="innerCode"
                align="center"
                label="机器编号"
              ></el-table-column>
              <el-table-column
                prop="vmStatus1"
                align="center"
                label="设备状态"
                width="80px"
              ></el-table-column>
              <el-table-column
                prop="lastSupplyTime"
                align="center"
                label="最后一次供货时间"
              ></el-table-column>
            </el-table>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  changePartnerDetails,
  getNodeList,
  addNode,
  partnerOption,
  businessTypeOption,
  getAreaOption,
  getAreaDetails,
  lookVmDetails,
  changeNodeDetails,
  changeAreaDetails,
} from "@/api/node";
import axios from "axios";
import {
  regionData,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  name: "Node",
  components: {},
  data() {
    return {
      vmStatus: {
        0: "未投放",
        1: "运营",
        2: "维修",
        3: "撤机",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      //地址信息
      addressData: regionData,
      addressSelections: [],

      getAreaOptionList: [],
      showAreadetails: false,
      dialogFormVisible: false,
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      areaform: {
        nodesearch: "",
        areasearch: "",
      },
      machienList: [],
      partnerOptionList: [],
      businessTypeOptionList: [],
      addNodeForm: {
        name: "",
        regionId: "",
        businessId: "",
        ownerId: "",
        adda: "",
        addr: "",
        areaCode: "",
        ownerName: "",
      },
      nodelists: [],
      rules: {
        name: [{ required: true, message: "请输入", trigger: "submit" }],
        regionId: [{ required: true, message: "请选择", trigger: "submit" }],
        businessId: [{ required: true, message: "请选择", trigger: "submit" }],
        ownerId: [{ required: true, message: "请选择", trigger: "submit" }],
        addr: [{ required: true, message: "请输入", trigger: "submit" }],
      },
    };
  },
  computed: {
    finallyAddress() {
      return `${this.adda}-${this.addNodeForm.addr}`;
    },
  },
  async created() {
    this.getNodeList();
    this.getAreaOption();
    this.businessTypeOptionList = await businessTypeOption();
    const { currentPageRecords } = await partnerOption(1, 10000);
    this.partnerOptionList = currentPageRecords;
  },
  methods: {
    getownername(e) {
      let res = this.partnerOptionList.find((item) => {
        return item.id === e;
      });
      this.ownerName = res.name;
    },
    handleAddress(val) {
      // console.log(this.addressSelections);
      this.addNodeForm.areaCode = val[2];
      this.adda = `${CodeToText[val[0]]}-${CodeToText[val[1]]}-${
        CodeToText[val[2]]
      }`;
    },
    async getAreaOption() {
      const { currentPageRecords } = await getAreaOption(1, 1000);
      this.getAreaOptionList = currentPageRecords;
    },
    async getNodeList() {
      const res = await getNodeList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.areaform.nodesearch,
        this.areaform.areasearch
      );
      this.nodelists = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.nodelists.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
    },
    addPage() {
      this.pageParams.pageIndex++;
      this.getNodeList();
    },
    innPage() {
      this.pageParams.pageIndex--;
      this.getNodeList();
    },
    search() {
      this.getNodeList();
    },
    closefn() {
      this.$refs.addnodeform.resetFields();
      this.dialogFormVisible = false;
      this.addressSelections = [];
    },
    closefn1() {

    },
    quitfn() {
      this.closefn();
    },
    submitfn() {
      this.$refs.addnodeform.validate(async (right) => {
        if (right) {
          if (!this.addNodeForm.createUserId) {
            await addNode({
              addr: this.finallyAddress,
              areaCode: this.addNodeForm.areaCode,
              businessId: this.addNodeForm.businessId,
              createUserId: 1,
              name: this.addNodeForm.name,
              ownerId: this.addNodeForm.ownerId,
              ownerName: this.ownerName,
              regionId: this.addNodeForm.regionId,
            });
            this.$message.success("添加成功");
            this.pageParams.pageIndex = 1;
            this.getNodeList();
            this.closefn();
          } else {
            const res = await changeNodeDetails(
              {
                addr: this.finallyAddress,
                areaCode: this.addNodeForm.areaCode,
                businessId: this.addNodeForm.businessId,
                createUserId: 1,
                name: this.addNodeForm.name,
                ownerId: this.addNodeForm.ownerId,
                ownerName: this.ownerName,
                regionId: this.addNodeForm.regionId,
              },
              this.addNodeForm.id
            );
            if (res == true) {
              this.$message.success("修改成功");
              (this.addNodeForm = {
                name: "",
                regionId: "",
                businessId: "",
                ownerId: "",
                adda: "",
                addr: "",
                areaCode: "",
                ownerName: "",
              }),
                this.closefn();
              this.getNodeList();
            }
          }
        } else {
          this.$message.error(new Error());
        }
      });
    },
    async details(row) {
      const id = row.id;
      this.machienList = await lookVmDetails(id);
      // console.log(res);
      this.machienList.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
      this.machienList.forEach((item) => {
        this.$set(item, "vmStatus1", this.vmStatus[item.vmStatus]);
      });
      this.showAreadetails = true;
    },
    async newAndChange(model, row) {
      if (model === "新建") {
        this.dialogFormVisible = true;
      } else {
        const res = row.addr.split("-");
        const res1 = res[0].split(",");
        // console.log(res1[0],res1[1],res1[2]);
       const res2=[TextToCode[res1[0]][res1[1]][res1[2]].code];
       const res3=[TextToCode[res1[0]][res1[1]].code];
       const res4=[TextToCode[res1[0]].code];
      this.addressSelections.push(res4[0],res3[0],res2[0])
        // console.log(this.addressSelections);
        this.addNodeForm.addr = res[res.length - 1];
        this.addNodeForm.name = row.name,
          this.addNodeForm.id = row.id,
          this.addNodeForm.createUserId = row.createUserId,
          this.addNodeForm.regionId = row.regionId,
          this.addNodeForm.businessId = row.businessId,
          this.addNodeForm.ownerId = row.ownerId,
          this.addNodeForm.areaCode = row.areaCode,
          this.addNodeForm.ownerName = row.ownerName,
          this.dialogFormVisible = true
      }
    },
    del(id) {
      console.log(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
.el-input,
.el-cascader,
.el-select,
.el-textarea {
  box-sizing: border-box;
  width: 100%;
}
::v-deep .el-dialog {
  padding: 0 10px;
  width: 50%;
  .dialog-footer {
    margin-top: -30px;
  }
  .single {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
    flex: 1;
    .right {
      width: 80%;
      margin-left: 10px;
      .el-table {
        margin-top: -15px;
      }
    }
  }
}
</style>
